<template>
    <!-- <h2>详情页  </h2> -->
    <div v-for="(item,index) in list" :key="item.name">
       
        <div class="type" :id="index"  name="box">{{ item.name }}</div>
        <div class="main" v-for="(food, index) in item.foods" :key="food.index">
            <img :src="food.image" alt="">
            <div class="right">
                <p class="p1">{{ food.name }}</p>
                <p class="p2">{{ food.description}}</p>
                <span>月售{{ food.sellCount }}份</span>
                <span>好评率{{ food.rating }}%</span>
                <div class="pri">
                    <span class="price">￥{{ food.price }}</span>
                    <span ><del>￥{{ food.oldPrice }}</del></span>
                </div>
        
                <div class="add">
                    <button v-show="food.count > 0" @click="NumSub(food)">-</button>
                    <span v-show="food.count > 0 ">{{ food.count }}</span>
                    <button @click="[NumAdd(food) , getPrice()]">+</button>
                </div>
            </div>
        
        </div>
        
    </div>
    
    

</template>

<script>
import { resolveComponentType } from '@vue/compiler-core';
import axios from 'axios';

    export default {
        // emits:["show" , "carList" , "allPrice", "item.foods"],
        data(){
            return{
                list:[],
                obj:{},
                goods:{},  // 商家列表数据             
                show:false,  // 是否显示购物车列表
                carList:[],  // 购物车列表数据
                allPrice: 0,   // 总价
            }
        },
        created(){
            this.getData()
            
        },
        methods:{
            async getData() {
                const { data } = await axios.get("http://localhost:8088/list")
                // console.log(data)
                this.list = data.goods
                // console.log(this.list)

            },
            NumSub(food){
                if( food.count >0 ){
                    food.count--;
                }
            },
            NumAdd(food){
                console.log(food)
                if( !food.count ){
                    food.count = 1;
                }else{
                    food.count++;
                }
                
            },
            setCarList(food){
                const hasItem = carList.findIndex((item) => {
                    return food.name === item.name
                });

                if( hasItem === "-1" ){
                    this.carList.push( food.name );
                }
                console.log( this.carList );
                // this.$emit('setCarList','this.carList');
            },
            showCar(){
                this.show = !this.show;

                // this.$emit('showCar',this.show);
            },
            getPrice(){
                let num = 0;
                this.carList.forEach((item) => {
                    this.NumAdd();
                    num += item.price * item.count;
                });
                console.log( num );
                this.allPrice = num
                // this.$emit('getPrice',this.allPrice);
                return this.allPrice ;
            }
        },
    }
</script>

<style scoped>
*{
    margin: 0;padding: 0;
}
img{
    width: 100%;
    height: 100%;
    display: block;
}
.type{
    font-size: 3.467vw;
    padding: 1.6vw 1.6vw;
    color: gray;
    background: rgba(255,255,255,0.3);
}
.main{
    height: 26.667vw;
    background: white;
    padding: 4.8vw;
    border-bottom: 0.133vw solid gray;
    position: relative;
}
.main img{
    width: 26.667vw;
    height: 26.667vw;
    float: left;
    margin-right: 2.667vw;
}
.main .right{
    font-size: 2.933vw;
    color: gray;
    
}
.main .right>span{
    padding-right: 1.333vw;
}
.main .right p{
    padding-bottom: 0.8vw;
}
.main .p1{
    font-size: 3.733vw;
    font-weight: bold;
    color: black;
}
.main .p2{
    font-size: 2.133vw;
}
.main .right .pri .price{
    font-size: 3.2vw;
    font-weight: bold;
    color: red;
    padding-right: 2.133vw;
}
.main .pri{
    float: left;
    margin-top: 2vw;
}
.add{
    float: right;
    color: gray;
    line-height: 6.4vw;
    font-size: 4vw;
    /* border: 1px solid gray; */
    margin-top: 1.067vw;
}
.add button{
    width: 5.067vw;
    height: 5.067vw;
    color: white;
    font-size: 4.533vw;
    text-align: center;
    line-height:5.067vw ;
    border: 0.133vw solid gray;
    border-radius: 50%;
    background: rgb(0,160,220);
}
.add>span{
    padding: 0 1.6vw;
}
</style>